<template>
	<div class="travel">
		<!-- 列表 -->
		<ul>
			<li v-for="(item,index) in nowList" :key="item.id">
				<div class="contain" v-show="index > 1">
					<article>
						<img :src="fun(item.image)">
						<p>{{item.placeLabel}}</p>
					</article>
					<aside>
						<h3>{{item.title}}</h3>
						<h4>{{item.productType}}</h4>
						<p>
							￥<strong>{{item.priceLabel}}</strong>
							<em>{{item.numLabel}}</em>
						</p>
					</aside>
				</div>
			</li>
		</ul>
	</div>
</template>

<script>
	export default{
		name:'TravelList',
		props : [ 'list_Son' , 'list_NewSon' ],
		data(){
			return {
				list : [
					{ id : 1 , img : '/travelImg/1.jpg' ,  city : '广州出发' , txt : '[跨年登高 • 四姑娘山嘉年华]登顶5025/5276雪山之巅；双桥沟攀冰初体验；与三获金犀牛攀登大神零距离对话；藏式跨年晚会；赠送登顶证书，5日雪山圆梦之旅！' , price : '2280' , num : '584' , title : '跟团游 亲子游 5天4晚' },
					{ id : 2 , img : '/travelImg/2.jpg' ,  city : '南京出发' , txt : '[梅里转山·跨年特辑]12.26~1.1！2022朝圣梅里雪山，徒步雨崩村-冰湖-神瀑，7日轻装徒步（新增：千人长桌宴+锅庄舞跨年夜+转经筒新年祈福）' , price : '2250' , num : '15' , title : '跟团游 亲子游 5天4晚' },
					{ id : 3 , img : '/travelImg/3.jpg' ,  city : '黄山出发' , txt : '[徒步恩施秘境]可提前一晚离开！2021神秘北纬30度，屏山峡谷-恩施大峡谷-鹿院坪-利川-清江古河床，鹿院坪感受世外桃源，清江古河床徒步，“湖北的香格里拉”徒步7日游！' , price : '1080' , num : '506' , title : '跟团游 亲子游 5天4晚' },
				],
				nowList : [],
				// 新建的接受借口数组的值
				obj : {
					id : '',
					// 图片路径
					image : '',
					// 哪里出发
					placeLabel : '',
					// 长h3标题
					title : '',
					// 价格price
					priceLabel : '',
					// 报名人数
					numLabel : '',
					// 跟团游
					productType : '',
					// 户外游
					productCat : '',
					// 五天四晚条目
					days : ''
				},
			}
		},
		methods:{
			fun(x){
				if( x ){
					return 'http://images.weserv.nl/?url='+x;
				}else{
					return x;
				}
			}
		},
		watch:{
			list_Son(){
				this.nowList = [];
				// console.log( this.list_Son );
				// console.log(this.list_Son[0].dataDetail);
				for( let i in this.list_Son ){
					this.nowList.push( this.list_Son[i].dataDetail );
				}
				// console.log(this.nowList);
			},
			list_NewSon(){
				for( let i in this.list_NewSon ){
					if( i < 2 ){
						continue;
					}
					else{
						this.nowList.push( this.list_NewSon[i].dataDetail );
					}
				}
			}
		}
	}
</script>

<style scoped>
	.contain{
		width: 100%;
		height: 6rem;
		border-radius: 0.3rem;
		float: left;
		position: relative;
		border: 1px solid gainsboro;
		margin: 0.2rem 0.2rem;
	}
	.contain img{
		width: 100%;
		height: 3.5rem;
		border-radius: 0.3rem 0.3rem 0 0;
	}
	.contain article p{
		width: 1.2rem;
		height: 0.5rem;
		line-height: 0.5rem;
		text-align: center;
		position: absolute;
		top: 0;
		left: 0.01rem;
		border-radius: 0.3rem 0 0.3rem 0;
		color: white;
		background-color: rgba( 0 , 0 , 0 , 0.3 );
	}
	.contain aside h3{
		padding-left: 0.4rem;
		padding-right: 0.4rem;
		/* text-indent: 0.5em; */
		text-align: center;
		margin-top: 0.3rem;
		font-weight: bold;
		font-size: 0.35rem;
		overflow: hidden;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
	}
	.contain aside h4{
		text-indent: 1em;
		font-size: 0.3rem;
		margin-top: 0.1rem;
		color: #808080;
	}
	.contain aside p{
		color: #ff7100;
		margin-top: 0.3rem;
		text-indent: 1em;
	}
	.contain aside p strong{
		font-size: 0.4rem;
		text-indent: 1em;
		font-weight: bold;
		color: #FF7100;
	}
	.contain aside p em{
		color: #808080;
		margin-left: 36%;
	}
	.travel ul{
		width: 100%;
	}
	.travel ul li{
		width: 45%;
		float: left;
	}
	.travel ul li:nth-child(even){
		/* margin-top: 2%; */
		margin-left: 2%;
	}
</style>
